<style scoped>

element.style {
    width: 99.99%;
}
.D_from {
  width: 80%;
  height: 200px;
  padding: 30px;
  margin: auto;
}
.D_from[data-v-26084dc2] {
  position: absolute;
  top: 216pt;
  left: 7pt;
}
.D_from /deep/ .van-field__label {
  width: 2.2em;
  position: absolute;
  top: 299pt;
  left: 53pt;
}
/* .D_from /deep/ .van-button::before {
  top: 299pt;
} */

/* 文字 */
#p1 {
  font-size: 28pt;
  position: absolute;
  top: 30pt;
  left: 39pt;
  color: #ffffff;
}
#p2 {
  font-size: 26pt;
  position: absolute;
  top: 60pt;
  left: 39pt;
  color: #ffffff;
}
#p3 {
  font-size: 20pt;
  position: absolute;
  top: 180pt;
  left: 39pt;
  color: #333;
}
/* 按钮 */
.D_from /deep/ .van-button--info {
  top: 133px;
  color: #fff;
  background-color: #e171de;
  border: 1px solid #e171de;
}
#btn {
  background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
  top: 130px;
  left: 0pt;
}
#r1 {
  position: absolute;
  top: 326pt;
  left: 30pt;
  color: black;
  font-size: 11pt;
}
#r2 {
  position: absolute;
  top: 326pt;
  left: 230pt;
  color: black;
  font-size: 11pt;
}
/* 顶部导航栏 */
#header {
  background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
  font-family: Georgia;
  font-size: 22px;
  height: 40px;
  line-height: 1;
  padding: 0 10px;
}
/* 底部图片 */
#Img1 {
  position: absolute;
  top: 571px;
  left: 12pt;
  width: 90%;
  align-content: center;
}
#Img2 {
  position: absolute;
  top: 619px;
  left: 32pt;
}
#Img3 {
  position: absolute;
  top: 619px;
  left: 163px;
}
#Img4 {
  position: absolute;
  top: 619px;
  left: 283px;
}
</style>
<template style="margin:auto">
  <div style="margin: auto">
    <!-- 顶部导航栏 -->
    <mt-header id="header" title="Tokyo2020">
      <router-link to="/register" slot="right">
        <mt-button style="font-size: 16px">注册</mt-button>
      </router-link>
      <router-link to="/" slot="left">
        <mt-button icon="back" style="font-size: 16px">返回</mt-button>
      </router-link>
    </mt-header>
    <!-- 顶部图片 -->
    <div>
      <img src="/Img/Login.png" alt="" style="width: 100%" />
      <p id="p1">Hi~</p>
      <p id="p2">欢迎登录</p>
      <p id="p3">登录</p>
      <router-link to="#" id="r1">注册</router-link>
      <router-link to="#" id="r2">忘记密码</router-link>
    </div>
    <!-- 表单 -->
    <div class="D_from">
      <van-form @submit="chename" id="">
        <van-field
          left-icon="/Img/filed1.png"
          style="margin-bottom: 10px; border: 1px solid #999"
          v-model="username"
          type="text"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />
        <van-field
          left-icon="/Img/filed2.png"
          style="margin-bottom: -100px; border: 1px solid #999"
          v-model="password"
          name="密码"
          type="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <router-link to="#">忘记密码</router-link>
        <div style="margin: 16px">
          <van-button
            id="btn"
            round
            block
            type="info"
            native-type="submit"
            @click="onclick"
            >提交</van-button
          >
        </div>
        
      </van-form>
    </div>
    <!-- 底部图片 -->
    <div style="margin: auto">
      <!-- <img src="/Img/奥运火炬.gif" alt="" style="width: 40%" /> -->
      <img id="Img1" src="/Img/Login13.png" alt="" />
      <img id="Img2" src="/Img/Login11.png" alt="" />
      <img id="Img3" src="/Img/Login12.png" alt="" />
      <img id="Img4" src="/Img/qq.png" alt="" />
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password: "",
      userid:'',
    };
  },
  methods: {
    chename() {
      let reg = /^\w{6,11}@\w{2,4}.\w{2,4}$/;
      if (reg.test(this.username)) {
        // console.log("账号输入正确");
        return true;
      } else {
        // console.log("输入错误");
        return false;
      }
    },
    chepwd() {
      let reg = /^\w{6,15}$/;
      if (reg.test(this.password)) {
        // console.log("密码输入正确");
        return true;
      } else {
        // console.log("密码输入错误");
        return false;
      }
    },
    onclick() {
      if (this.chename() && this.chepwd()) {
        axios.post("/login", `email=${this.username}&userpwd=${this.password}`).then((result) => {
          if(result.data.code==200){
            this.$toast({
              message:'登陆成功！',
            })
            this.userid=result.data.result.Tid;
            //访问vuex的mutations 修改state的状态
            this.$store.commit('loginOK',{
              newname:this.username,
              userid:result.data.result.Tid
            });
            //不仅需要存到vux中 还要存到sessionStorage中
            window.sessionStorage.setItem('islogin',true);
            window.sessionStorage.setItem('name',this.username);
            window.sessionStorage.setItem('id',result.data.result.Tid);
            this.product();
            this.$router.push('/')
          }else if(result.data.code==201){
            this.$toast({
              message:'账号或密码输入错误！登陆失败！请重新输入',
            })
          }
        });
      }
    },
    product(){
      axios.post('gett_user_cart',`userid=${this.userid}`).then((res)=>{
        let arr=res.data.results;
        if(arr.length==0){
          window.localStorage.setItem('car',[]);
        }else{
          window.localStorage.setItem('car',JSON.stringify(arr));
          this.$store.state.car=JSON.parse(window.localStorage.getItem('car')).reverse();
        }
      })
    },

  },
};
</script>
